<template>
  <div class="fortune-container">
    <h1 class="title">抽取你的每日运势</h1>
    <div class="fortune-card" @click="drawFortune">
      <div class="card-content">
        <h2 class="daily-fortune">{{ dailyFortune.title }}</h2>
        <p class="fortune-description">{{ dailyFortune.description }}</p>
      </div>
    </div>
    <button class="draw-button" @click="drawFortune">再抽一次</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const fortunes = [
  {
    id: 1,
    title: '运势极佳',
    description: '今天你的运势非常好，适合开展新项目或尝试新事物，无论是工作上的重要任务，还是生活中的兴趣探索，都有望取得令人满意的成果哦。'
  },
  {
    id: 2,
    title: '运势一般',
    description: '今天你的运势平平，但保持积极的态度会带来好运，虽然可能不会有特别突出的事情发生，但只要积极应对，也能平稳度过这一天呢。'
  },
  {
    id: 3,
    title: '运势不错',
    description: '今天你的运势尚可，适合进行一些轻松的活动，比如和朋友聚聚、看看电影，享受惬意时光会让你感觉很愉快哦。'
  },
  {
    id: 4,
    title: '运势稍差',
    description: '今天运势可能不太理想，做事可能会遇到一些小阻碍，不过别气馁，小心谨慎应对，也能避免很多麻烦哦。'
  },
  {
    id: 5,
    title: '财运亨通',
    description: '今天财运方面运势颇佳，无论是投资理财，还是工作上的奖金福利等，都有可能收获惊喜呢，可适当关注一下哦。'
  },
  {
    id: 6,
    title: '桃花盛开',
    description: '今天在感情方面运势不错哦，有可能遇到心仪的人，或者和身边的爱人感情更加甜蜜呢，要好好把握机会呀。'
  },
  {
    id: 7,
    title: '事业顺遂',
    description: '今天工作上的运势良好，各项任务推进都会比较顺利，也许还能得到领导的认可或者同事的帮助呢，加油哦。'
  },
  {
    id: 8,
    title: '健康欠佳',
    description: '今天要多留意一下自己的身体状况呀，可能会感觉有点疲惫或者小不舒服，记得劳逸结合，好好休息哦。'
  }
];

const dailyFortune = ref(fortunes[0]);

function drawFortune() {
  const index = Math.floor(Math.random() * fortunes.length);
  dailyFortune.value = fortunes[index];
}
</script>

<style scoped>
.fortune-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f0f4f8; /* 淡淡的浅灰色 */
  color: #333;
  text-align: center;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.title {
  font-size: 2em;
  margin-bottom: 20px;
  color: #3182ce; /* 淡淡的浅蓝色 */
}

.fortune-card {
  background-color: #ffffff;
  border: 1px solid #d3d3d3; /* 淡淡的浅灰色 */
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fortune-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.daily-fortune {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #3182ce; /* 淡淡的浅蓝色 */
}

.fortune-description {
  font-size: 1em;
  color: #6b7280; /* 淡淡的浅灰色 */
  max-width: 300px;
  line-height: 1.5;
}

.draw-button {
  padding: 10px 20px;
  font-size: 1em;
  color: #ffffff;
  background-color: #3182ce; /* 淡淡的浅蓝色 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.draw-button:hover {
  background-color: #2c5282;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.draw-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>